<template>
	<view class="videos" @touchmove.stop.prevent>
		<view class="videos-content">
			<view class="videos-content-close" @click="onClice"> ✕</view>
			<video class="videos-content-video1" :src="videos" controls autoplay :show-fullscreen-btn='false'></video>
		</view>
	</view>
</template>
<script>
	export default {
		props: {
			videos: {
				type: String,
				default: ''
			}
		},
		name: 'videos',
		data() {
			return {
				hidden: false
			}
		},
		methods: {
			onClice() {
				this.$emit('videoClose')
			}
		}
	}
</script>
<style lang="less" scoped>
	.videos {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		display: flex;
		justify-content: center;
		align-items: center;
		background: rgba(0, 0, 0, 0.8);
		z-index: 99999999999999999999999999999999999999999999;

		&-content {
			width: 100%;
			height: 700rpx;
			display: flex;
			flex-direction: column;

			&-close {
				color: #fff;
				font-size: 32rpx;
				margin: 0 40rpx 20rpx auto;
				border-radius: 50%;
				width: 48rpx;
				height: 48rpx;
				line-height: 48rpx;
				text-align: center;
				justify-content: center;
				border: 2rpx solid #ddd;
			}

			&-video1 {
				width: 100%;
				height: 600rpx;
			}
		}
	}
</style>